<template>
	<view>
		<uni-drawer ref="fliter" mode="right" :width="230">
			<view class="filter">
				<view class="filter-line">
					<view class="filter-title">{{$t('common.field.keyword')}}</view>
					<view class="filter-input">
						<input :placeholder="$t('common.field.enterKeywords')" v-model="keyword"/>
					</view>
				</view>
				<view class="filter-btn">
					<button type="primary" @click="doQuery">{{$t('baseCommon.buttons.confirm')}}</button>
					<button type="default" @click="doClear">{{$t('baseCommon.buttons.reset')}}</button>
				</view>
			</view>
		</uni-drawer>
		
		<mescroll-body bottom="60px" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<radio-group @change="radioChange">
				<label class="select-list" v-for="item in list" :key="item.eqTypeId">
					<view class="check-cell">
						<radio :value="item.eqTypeId" :checked="item.eqTypeId === checkedItem.eqTypeId" class="check-size" />
					</view>
					<view class="select-content">
						<view class="select-detail"><strong>{{$t('equipment.type.typeNo')}}：</strong>{{ item.eqTypeNo }}</view>
						<view class="select-detail"><strong>{{$t('equipment.type.typeName')}}：</strong>{{ item.eqTypeName }}</view>
					</view>
				</label>
			</radio-group>
		</mescroll-body>
		
		<view class="select-btn">
			<button type="primary" @click="doSure">{{$t('baseCommon.buttons.confirm')}}</button>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
	import { getEquipmentType } from '@/api/base/equipment.js'
	
	export default {
		mixins: [MescrollMixin], 
		data() {
			return {
				keyword: '',
				list: [],
				checkedItem: {},
				eqType: ''
			}
		},
		onLoad(option) {
			this.eqType = option.eqTypeId
		},
		methods: {
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			async upCallback(page) {
				let requestPage = {
					pageNo: page.num,
					limit: page.size
				}
				
				let params = {
					requestPage: requestPage,
					isOn: "Y",
				}
				if(this.keyword) {
					params.key = this.keyword
				}
				
				await getEquipmentType(params).then(res=>{
					let curPageData = res.data.records
					let curPageLen = curPageData.length
					let totalSize = res.data.total
					//设置列表数据
					if(page.num == 1) this.list = [] //如果是第一页需手动置空列表
					this.list = this.list.concat(curPageData) //追加新数据
					
					this.mescroll.endBySize(curPageLen, totalSize) 
				})
				
				// 数据反显
				this.list.forEach(item=>{
					if(item.eqTypeId === this.eqType) {
						this.checkedItem = item
					}
				})
			},
			doQuery() {
				this.$refs.fliter.close()
				this.mescroll.resetUpScroll()
			},
			doClear() {
				this.keyword = ""
			},
			radioChange(e) {
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].eqTypeId === e.target.value) {
						this.checkedItem = this.list[i];
						break;
					}
				}
			},
			doSure() {
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('selectEqType', this.checkedItem);
				uni.navigateBack();
			}
		},
		onNavigationBarButtonTap(e) {
			this.$refs.fliter.open()
		}
	}
</script>

<style lang="scss">
	@import '@/static/style/common-list.scss';
</style>
